<!-- 弹窗详情 -->
<template>
	<a-modal v-model:visible="_d.visible" title="弹窗标题" width="1000px"
		:bodyStyle="{minHeight: '300px'}"
		@ok="handleOk">
  	<a-form :label-col="{style: {width: '6em'}}">
			<a-form-item label="账号名称" v-bind="validateInfos.aaa">
    		<a-input v-model:value="_d.form.aaa" placeholder="请输入"></a-input>
    	</a-form-item>
    	<a-form-item label="姓名" v-bind="validateInfos.bbb">
    		<a-input v-model:value="_d.form.bbb" placeholder="请输入"></a-input>
    	</a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
	import { reactive, ref, computed } from 'vue'
	import { Form, notification } from 'ant-design-vue';

	const _d = reactive({
		visible: false,

		form: {
			aaa: '',
			bbb: '',
		},

		rules: {
			aaa: [
				{ required: true, trigger: 'blur', message: '请输入账号名称' }
			],
			bbb: [
				{ required: true, trigger: 'blur', message: '请输入姓名' }
			],
		}

	})

	// 验证
	const { resetFields, validate, validateInfos } = Form.useForm(_d.form, _d.rules);

	function open(id) {
		resetFields();

		_d.visible = true;
	}


	// 提交
	function handleOk() {
		validate().then(() => {
			_d.loading = true;
			setTimeout(() => {
				_d.loading = false;
			}, 1000);
		})
	}


	defineExpose({
		open
	})

</script>

<style lang="less" scoped>

</style>